<template>
  <div class="annual-plan-details">
    <div class="container-content">
      <div class="plantView-title">
        <span>年度计划/年度项目列表/详情</span>
        <span class="back-btn" @click="() => this.$router.back()"
          ><img src="../../assets/images/icon_comm_back.png" alt="" />返回</span
        >
      </div>
      <!-- 基本信息 -->
      <div class="model-outBox">
        <div
          class="model-title"
          style="display: flex; justify-content: space-between"
        >
          <div>
            <img src="@/assets/images/tripartite/icon_title.png" />
            <span>基本信息</span>
          </div>
        </div>
        <el-descriptions border :column="1">
          <el-descriptions-item
            label="项目名称"
            label-class-name="descriptions-item-label"
            content-class-name="descriptions-item-content"
            >{{
              annualDeclaration.entryName ? annualDeclaration.entryName : ""
            }}</el-descriptions-item
          >
        </el-descriptions>
        <el-descriptions border :column="2">
          <el-descriptions-item
            label="项目性质"
            label-class-name="descriptions-item-label cancel-border-top"
            content-class-name="descriptions-item-content cancel-border-top"
            >{{ "年度项目" }}</el-descriptions-item
          >
          <el-descriptions-item
            label="项目类别"
            label-class-name="descriptions-item-label cancel-border-top"
            content-class-name="descriptions-item-content cancel-border-top"
            >{{
              annualDeclaration.projectCategory === '0'
                ? "建设类（新开工）"
                :annualDeclaration.projectCategory === '1'
                ? "建设类（续建）"
                : annualDeclaration.projectCategory === '2'
                ? "购买服务类"
                : annualDeclaration.projectCategory === '3'
                ? "运维类"
                : annualDeclaration.projectCategory === '4'
                ? "其他"
                : annualDeclaration.projectCategory
            }}
          </el-descriptions-item>
          <el-descriptions-item
            label="项目投资估算(万元)"
            label-class-name="descriptions-item-label cancel-border-bottom"
            content-class-name="descriptions-item-content cancel-border-bottom"
            >{{
              annualDeclaration.projectInvestmentEstimation
            }}</el-descriptions-item
          >
          <el-descriptions-item
            label="资金来源"
            label-class-name="descriptions-item-label cancel-border-bottom"
            content-class-name="descriptions-item-content cancel-border-bottom"
            >{{
              annualDeclaration.sourceOfFunds == "0" ? "区财政资金" : annualDeclaration.sourceOfFunds == "1" ? "其他" : ""
            }}</el-descriptions-item
          >
        </el-descriptions>
        <el-descriptions border :column="1">
          <el-descriptions-item
            label="项目建设理由"
            label-class-name="descriptions-item-label descriptions-item-height"
            content-class-name="descriptions-item-content descriptions-item-height"
            >{{
              annualDeclaration.reasonsForProjectConstruction
            }}</el-descriptions-item
          >
          <el-descriptions-item
            label="项目内容简介"
            label-class-name="descriptions-item-label descriptions-item-height"
            content-class-name="descriptions-item-content descriptions-item-height"
            >{{
              annualDeclaration.projectContentIntroduction
            }}</el-descriptions-item
          >
          <el-descriptions-item
            label="预期效果描述"
            label-class-name="descriptions-item-label descriptions-item-height"
            content-class-name="descriptions-item-content descriptions-item-height"
            >{{
              annualDeclaration.expectedEffectDescription
            }}</el-descriptions-item
          >
          <el-descriptions-item
            label="项目进展"
            label-class-name="descriptions-item-label descriptions-item-height"
            content-class-name="descriptions-item-content descriptions-item-height"
            >{{ annualDeclaration.workCompletion }}</el-descriptions-item
          >
          <el-descriptions-item
            label="项目建议书"
            label-class-name="descriptions-item-label "
            content-class-name="descriptions-item-content "
          >
            <span
              class="pointer blueColor"
              @click="$download(annualDeclaration.projectProposalFile.fileUrl)"
              v-if="
                annualDeclaration !== null || annualDeclaration != undefined
              "
              ><img
                src="@/assets/images/tripartite/icon_files.png"
                v-show="
                  annualDeclaration.projectProposalFile &&
                  annualDeclaration.projectProposalFile.fileUrl
                "
              />{{
                annualDeclaration.projectProposalFile &&
                annualDeclaration.projectProposalFile.fileName
                  ? annualDeclaration.projectProposalFile.fileName
                  : ""
              }}
            </span>
          </el-descriptions-item>
        </el-descriptions>
      </div>
      <!-- 联系方式 -->
      <div class="model-outBox">
        <div class="model-title">
          <img src="@/assets/images/tripartite/icon_title.png" />
          <span>联系方式</span>
        </div>
        <el-descriptions border :column="2">
          <el-descriptions-item
            label="业主单位"
            label-class-name="descriptions-item-label"
            content-class-name="descriptions-item-content"
            >{{ annualDeclaration.constructionUnit }}</el-descriptions-item
          >
          <el-descriptions-item
            label="责任科室"
            label-class-name="descriptions-item-label"
            content-class-name="descriptions-item-content"
            >{{ annualDeclaration.department }}</el-descriptions-item
          >
          <el-descriptions-item
            label="项目负责人"
            label-class-name="descriptions-item-label"
            content-class-name="descriptions-item-content"
            >{{ annualDeclaration.projectLeader }}</el-descriptions-item
          >
          <el-descriptions-item
            label="负责人电话"
            label-class-name="descriptions-item-label"
            content-class-name="descriptions-item-content"
            >{{ annualDeclaration.telephoneNumber }}</el-descriptions-item
          >
          <el-descriptions-item
            label="项目联系人"
            label-class-name="descriptions-item-label"
            content-class-name="descriptions-item-content"
            >{{ annualDeclaration.projectContact }}</el-descriptions-item
          >
          <el-descriptions-item
            label="联系人电话"
            label-class-name="descriptions-item-label"
            content-class-name="descriptions-item-content"
            >{{ annualDeclaration.contactTelephone }}</el-descriptions-item
          >
        </el-descriptions>
      </div>
      <!-- 评审结果 -->
      <div class="model-outBox">
        <div class="model-title">
          <img src="@/assets/images/tripartite/icon_title.png" />
          <span>评审结果</span>
        </div>
        <div class="confirmed-box">
          <div class="confirmed-content" v-for="(n,i) in courseList" :key="i">
            <div class="left-confirmed">
              <div class="left-title">{{ n.createTime.split(" ")[0] }}</div>
              <div>{{ n.createTime.split(" ")[1] }}</div>
            </div>
            <div class="right-confirmed">
              <div class="rigth-title">受理人：{{ n.approvalResult }}</div>
              <!-- <div>抽取吴楠、赵腾、周婕、李政斌、吴县平五位专家</div> -->
            </div>
            <div class="right_btn">
              {{
                n.approvalStatus == 0
                  ? "已提交"
                  : n.approvalStatus == 1
                  ? "待审核"
                  : n.approvalStatus == 2
                  ? "已通过"
                  : n.approvalStatus == 3
                  ? "退回修改"
                  : n.approvalStatus == 4
                  ? "驳回"
                  : "待提交"
              }}
              <!-- 已抽取 -->
            </div>
            <div class="yuan"></div>
          </div>
          <div class="left-line"></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getDeclaration } from "@/api/manage/annualPlan";
export default {
  data() {
    return {
      // 项目信息参数
      annualDeclaration: {},
      // 审核结果参数
      courseList:[]
    };
  },
  created() {
    this.getDetalisInfo();
  },
  methods: {
    getDetalisInfo() {
      getDeclaration(this.$route.query.infoId).then((response) => {
        if (response) {
          this.courseList = response.courseList;
          this.annualDeclaration = response;
        }
      });
    },
    /** 文件下载 */
    downloadFile(file) {
      if (file) {
        window.location.href = file.fileUrl;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.annual-plan-details {
  width: 100%;
  background: #f5f5f5;
  padding: 16px;
  font-size: 14px;
  .container-content {
    padding: 24px;
    background: #fff;
    .plantView-title {
      font-size: 18px;
      font-family: PingFang SC, PingFang SC-Medium;
      font-weight: 500;
      color: #000000;
      line-height: 18px;
      text-align: left;
      display: flex;
      justify-content: space-between;
      .back-btn {
        // margin-right: 56px;
        font-size: 14px;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: 400;
        color: #333333;
        display: flex;
        align-items: center;
        cursor: pointer;
        img {
          margin-right: 7px;
        }
      }
    }
  }
  .confirmed-box {
    width: 1600px;
    border-left: 1px solid #ebecef;
    position: relative;
    .confirmed-content {
      margin-left: 56px;
      width: 1543px;
      height: 82px;
      padding: 16px 24px;
      background: #fafafa;
      border-radius: 4px;
      display: flex;
      position: relative;
      margin-top: 30px;
      .left-confirmed {
        font-size: 14px;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: 400;
        text-align: LEFT;
        color: #999999;
        width: 226px;
        .left-title {
          font-weight: 400;
          color: #333333;
          margin-bottom: 10px;
        }
      }
      .right-confirmed {
        font-size: 14px;
        font-family: PingFang SC, PingFang SC-Medium;
        font-weight: 500;
        text-align: LEFT;
        color: #333333;
        .rigth-title {
          margin-bottom: 10px;
          font-family: PingFang SC, PingFang SC-Regular;
        }
      }
      .right_btn {
        width: 74px;
        height: 32px;
        background: #ebf6ec;
        border-radius: 4px;
        position: absolute;
        right: 24px;
        line-height: 32px;
        color: #fff;
        font-size: 14px;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: 400;
        text-align: center;
        color: #33a83d;
      }
      .yuan {
        width: 14px;
        height: 14px;
        background: #ffffff;
        border: 3px solid #d0e2fb;
        border-radius: 50%;
        position: absolute;
        left: -63px;
        top: 0;
      }
    }
    .left-line {
      position: absolute;
      height: 68px;
      left: -1px;
      bottom: 0;
      width: 1px;
      background-color: #fff;
    }
  }
}
.annual-plan-details {
  .model-outBox {
    .model-title {
      height: 50px;
      line-height: 50px;
      border-bottom: 1px solid #ebecef;
      border-top: 1px solid #ebecef;
      margin-bottom: 24px;
      margin-top: 24px;
      font-family: "PingFang SC";
      font-style: normal;
      font-weight: 500;
      font-size: 14px;
      img {
        width: 16px;
        height: 16px;
        position: relative;
        right: 5px;
        top: 2px;
      }
    }
  }
}
/* el-descriptions-item 文字居中 */
.annual-plan-details ::v-deep .el-descriptions__body .el-descriptions__table .el-descriptions-item__cell {
  text-align: center;
}
</style>
<style lang="scss">
.annual-plan-details {  
  .model-outBox {
    /* 信息描述组件样式更改 */
    .descriptions-item-label {
      width: 240px;
    }
    .descriptions-item-content {
      text-align: left !important;
      img {
        width: 16px;
        height: 16px;
        margin-right: 10px;
        position: relative;
        top: 4px;
      }
    }
    .cancel-border-top {
      border-top: 0 !important;
    }
    .cancel-border-bottom {
      border-bottom: 0 !important;
    }
    .descriptions-item-height {
      height: 108px;
    }
  }
}
</style>
